<script lang="tsx" setup>
/**
 *  应收款账单
 */
import {nextTick, ref} from "vue"
import {definePageModel, PageModel} from "@/frame/view/layout/page-model/constructor.ts"
import {defineDialogForm, DialogForm} from "@/frame/components/base/dialog-form/constructor.ts"
import {ElMessage, ElMessageBox} from "element-plus";
import {processRequest} from "@/frame/apis/request";
import {PayType} from "@/pages/finance/pay-accounts/pay-accounts.ts";

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "confirm"): void
}>()

/**
 * 弹窗配置
 */
const dialogFormRef = ref()
const dialogFormConfig = defineDialogForm({
  width: "1200px",
  title: "应收款账单子单详情"
})

/**
 * 页面配置
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: "/api/PayAccounts/Item",
  getImmediate: false,
  otherParams: {
    id: null
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    props: {
      stripe: false,
      border: false
    },
    operation: {
      width: 100,
      props: {
        fixed: "right"
      },
      els: [
        {
          eType: "el-button",
          label: "发起付款",
          event: "pay",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        }
      ]
    },
    els: [
      {
        label: "供应商编码",
        prop: "supplierCode",
        minWidth: 120
      },
      {
        label: "供应商名称",
        prop: "supplierName",
        minWidth: 120
      },
      {
        label: "应付款状态",
        prop: "status",
        minWidth: 120,
        renderFn(data) {
          return <span>{PayType[data.status]}</span>
        }
      },
      {
        label: "总金额",
        prop: "amount",
        minWidth: 120
      },
      {
        label: "未付款金额",
        prop: "payToDo",
        minWidth: 100
      },
      {
        label: "付款中金额",
        prop: "payDone",
        minWidth: 100
      },
      {
        label: "已付款金额",
        prop: "payDone",
        minWidth: 100
      },
      {
        label: "备注",
        prop: "remark",
        minWidth: 120
      },
      {
        label: "附件",
        prop: "file",
        minWidth: 120
      },
      {
        label: "创建时间",
        prop: "createTime",
        minWidth: 160
      },
    ]
  }
})

/**
 * 显示
 */
const show = (params: any) => {
  nextTick(() => {
    if (config.otherParams) {
      config.otherParams.id = params.id
    }
    dialogFormRef.value.show()
    console
    nextTick(() => {
      pageModelRef.value.refreshTableData()
    })
  })
}

/**
 * 发起付款
 */
const handlePay = async (row: any) => {
  const result = await ElMessageBox.prompt("请输入付款金额", "付款", {
    type: "success"
  })
  await processRequest.post("/api/PayAccounts/Pay",
      {
        id: row.id,
        amount: result.value
      }
  )
  ElMessage.success("发起付款成功")
  emit('confirm')
  handleRefresh()
}

/**
 * 刷新
 */
const handleRefresh = () => {
  pageModelRef.value.refreshTableData()
}

/**
 * 暴露
 */
defineExpose({
  show
})
</script>

<template>
  <DialogForm ref="dialogFormRef" :dialogFormModel="dialogFormConfig">
    <template #default>
      <div style="display: flex;height: 500px;">
        <PageModel ref="pageModelRef" :PageModel="config" @pay="handlePay"/>
      </div>
    </template>
  </DialogForm>
</template>